<template>
	<view>
		<view class="topics-item" v-if="info">
			<view class="user-info u-flex">
				<image :src="info.headimg" class="avatar"></image>
				<view class="info u-flex-1">
					<view class="name u-flex">
						<text class="u-line-1">{{info.nickname}}</text>
						<image class="level" :src="info.levelLogo" v-if="info.levelLogo"></image>
					</view>
					<view class="tag u-line-1">
						<text class="tag-label" v-if="info.tab == 2">专家</text>
						<text class="tag-text">{{info.choice ? '已采纳' : `答案采纳可获得【${info.ecoin}e币】`}}</text>
					</view>
				</view>
				<button class="u-reset-button" open-type="share">
					<view class="dot">
						<u-icon name="share-fill" size="34" color="#555"></u-icon>
					</view>
				</button>
			</view>
			<view class="content">
				<view class="title">{{info.title}}</view>
				<!-- 图文 -->
				<template v-if="info.type == 1">
					<view class="text">{{info.content}}</view>
					<view class="images u-flex u-flex-wrap" v-if="info.image.length">
						<image v-for="(img,index) in info.image" :key="index" :src="img" @click.stop="lookImg(img,info.image)" mode="aspectFill"></image>
					</view>
				</template>
				<!-- 音频 -->
				<template v-if="info.type == 2">
					<view class="mp3 u-flex" @click.stop="playMp3()">
						<view class="icon" style="padding: 0 20rpx 0 10rpx;">
							<u-icon name="play-circle-fill" color="#fff" size="44"></u-icon>
						</view>
						<v-loading2 :play="playing"></v-loading2>
							<view class="second" v-show="info.content || playing">{{playing ? active.second : info.content+'s'}}</view>
					</view>
				</template>
			</view>
			<view class="ctrl u-flex">
				<view class="ft-btn u-flex">
					<text class="iconfont icon-liuyan"></text>
					<view>{{info.replyCount || 0}}</view>
				</view>
				<view class="ft-btn u-flex" :class="{active:info.like}" @click="dolike(info.id,-1)">
					<text class="iconfont icon-xin"></text>
					<view>{{info.thumbs || 0}}</view>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="comment-title">{{commentList.length ? '全部回复' : ' 暂无回复'}}</view>
			<view class="comment-list">
				<view class="item" v-for="(item,index) in commentList" :key="item.id">
					<view class="user-info u-flex">
						<image :src="item.headimg" class="avatar"></image>
						<text class="u-line-1">{{item.nickname}}</text>
						<image class="level" :src="item.levelLogo"></image>
						<view class="like">
							<view class="ft-btn u-flex" :class="{active:item.like}" @click="dolike(item.id,index)">
								<text class="iconfont icon-xin"></text>
								<view>{{item.thumbs || 0}}人赞</view>
							</view>
						</view>
					</view>
					<view class="con">
						<view class="con-text">
							<xzj-readMore :is-choice="item.choice"
							:hideLineNum="vuex_user.levelId >= item.levelId || info.memberId === vuex_user.id || vuex_user.role === 2 ? 3 : 1"
							:showHeight="vuex_user.levelId >= item.levelId || info.memberId === vuex_user.id || vuex_user.role === 2 ? 114 : 38"
							>{{item.content}}</xzj-readMore>
						</view>
					</view>
					<!-- 本人发布的可以进行采纳 -->
					<view class="cn-btn" v-if="info.choice === 0 && vuex_user.id === info.memberId" @click="accept(item)">采纳回复</view>
				</view>
				
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="push-box">
				<textarea  placeholder="输入您的回复..." maxlength="1000" v-model="pushText"/>
				<view class="push-btn" @click="pushComment">
					<u-icon name="edit-pen"></u-icon><text class="num1">发表评论</text>
				</view>
			</view>
		</u-popup>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom" style="height: 139rpx;box-sizing: content-box;"></view>
		<!-- 发布评论 -->
		<view class="push-comment u-flex safe-area-inset-bottom" v-if="!appAuditState">
			<view class="push-btn" @click="show = !0">
				<u-icon name="edit-pen"></u-icon><text class="num1">我来回答</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appAuditState:"",
				comment_id:'',
				info:'',
				playing:!1,
				audio:uni.createInnerAudioContext(),//音频播放上下文对象
				commentList:[],
				page:1,
				status:'loading',
				show:!1,
				pushText:'',
				active:{
					second:-1
				}
			}
		},
		methods: {
			getconfig(){
				this.$u.api.getconfig().then(res=>{
					this.appAuditState = res.appAuditState
				})
			},
			getInfo(){
				this.$u.api.commentDetail({comment_id:this.comment_id}).then(res=>{
					this.info = res
					// 专家
					if(this.vuex_user.role === 2){
						return
					}
					
					if(res.levelId > this.vuex_user.levelId){
						uni.showModal({
							content:'您当前会员等级低于提问者等级，无法查看此问题',
							showCancel:!1,
							success: () => {
								this.$app.jump('/pages/topics/list',!0)
							}
						})
					}
				})
			},
			lookImg(img,item){
				uni.previewImage({
					urls:item,
					current:img
				})
			},
			playMp3(){
				this.active.second = ''
				this.audio.stop()
				this.audio.offTimeUpdate()
				this.audio.offPlay()
				this.audio.offEnded()
				
				if(this.playing){
					this.playing = !1
					return
				}
				
				this.audio.obeyMuteSwitch = !1
				this.audio.src = this.info.audio
				this.audio.onPlay(() => {
					// 监听开始播放
					this.playing = !0
					this.audio.offPlay()
				})
				this.audio.onEnded(() => {
					// 监听结束事件
					this.playing = !1
					this.audio.offEnded()
					this.audio.offTimeUpdate()
				})
				this.audio.onTimeUpdate(()=>{
					console.log(this.audio.currentTime,this.audio.duration)
					this.active.second = Math.floor(this.audio.duration - this.audio.currentTime) + 's'
				})
				this.audio.play()
			},
			dolike(id,index){
				this.$u.api.doLike({comment_id:id}).then(res=>{
					if(index === -1){
						if(!this.info.like){
							this.info.like = !0
							this.info.thumbs ++
						}
					}else{
						let item = this.commentList[index]
						if(!item.like){
							item.like = !0
							item.thumbs ++
							this.$set(this.commentList,index,item)
						}
					}
				})
			},
			accept(item){
				// 采纳某条评论 采纳后刷新信息，刷新列表
				uni.showModal({
					content:'是否采纳回复',
					success: (res) => {
						res.confirm && this.$u.api.doAccept({comment_id:item.id}).then(res=>{
							this.page = 1
							this.getInfo()
							this.getList()
						})
					}
				})
			},
			getList(){
				this.status = 'loading'
				this.$u.api.commentList({
					page:this.page,
					limit:10,
					parent_id:this.comment_id
				}).then(res=>{
					this.commentList = this.page == 1 ? res : this.commentList.concat(res)
					this.status = res.length  === 10 ? 'loadmore' : 'nomore'
				})
			},
			pushComment(){
				// 发布评论
				if(!this.pushText){
					this.$u.toast('请输入您的回复再提交')
					return
				}
				uni.showModal({
					content:'是否发布？',
					success: (res) => {
						res.confirm && this.$u.api.commentPush({
							parent_id:this.comment_id,
							content:this.pushText
						}).then(res=>{
							this.$u.toast('发布成功')
							this.show = !1
							this.pushText = ''
							this.page = 1
							this.getList()
							this.getInfo()
						})
					}
				})
			}
		},
		onLoad(o) {
			this.comment_id = o.id
			this.getInfo()
			// 评论列表
			this.getList()
			this.getconfig()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.page ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.getInfo()
			this.page = 1
			this.getList()
			setTimeout(t=>uni.stopPullDownRefresh(),500)
		}
	}
</script>

<style lang="scss" scoped>
	.topics-item{
		border-bottom: 10rpx solid #F2F2F2;padding: 40rpx 50rpx 40rpx;
		.user-info{
			.avatar{width: 80rpx;height: 80rpx;border-radius: 50%;display: block;flex-shrink: 0;margin-right: 20rpx;}
			.info{overflow: hidden;
				.name{
					align-items: flex-start;
					.level{flex-shrink: 0;width: 90rpx;height: 52rpx;}
					text{font-weight: bold;font-size: 28rpx;line-height: 50rpx;}
				}
				.tag{
					padding-top: 6rpx;
					.tag-label{background-color: #F4D7BF;border: 2rpx solid #F55332;border-radius: 8rpx;padding: 2rpx 14rpx;display: inline-block;font-weight: bold;color: #F55332;font-size: 24rpx;margin-right: 20rpx;}
					.tag-text{color: #F55332;font-weight: bold;}
				}
			}
		}
		.content{
			margin: 20rpx 0 0 90rpx;background-color: #F8F8F8;border-radius: 20rpx;padding:20rpx 30rpx;
			.title{font-size: 30rpx;font-weight: bold;color: #333;word-break: break-all;text-align: justify;padding-bottom: 10rpx;}
			.text{text-align: justify;word-break: break-all;}
			.images{
				justify-content: space-between;padding-top: 16rpx;
				image{width: 160rpx;height: 160rpx;border-radius: 10rpx;margin-top: 18rpx;
					&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
				}
				&::after{content: '';display: block;width: 160rpx;}
			}
			.mp3{background-color: #FFC798;height: 56rpx;border-radius: 100rpx;width: 80%;color: #fff;
				.second{margin-left: auto;margin-right: 20rpx;font-weight: bold;}
			}
			
		}
		.ctrl{
			justify-content: flex-end;padding-top: 40rpx;
			.ft-btn{
				white-space: nowrap;margin-right: 30rpx;
				&:last-child{margin-right: 0;}
				&.active{
					.iconfont,view{color: #F55332;}
				}
				.iconfont{color: #333;font-size: 38rpx;padding-right: 10rpx;}
				view{font-size: 24rpx;color: #666;}
			}
		}
	}
	
	.comment-title{padding: 30rpx 50rpx 10rpx;font-weight: bold;font-size: 32rpx;}
	.comment-list{
		.item{
			padding: 40rpx 50rpx;border-bottom: 2rpx solid #F2F2F2;
			.user-info{
				.avatar{width: 80rpx;height: 80rpx;border-radius: 50%;display: block;flex-shrink: 0;margin-right: 20rpx;}
				.level{flex-shrink: 0;width: 90rpx;height: 52rpx;}
				text{font-weight: bold;font-size: 28rpx;line-height: 50rpx;}
			}
			.like{
				margin-left: auto;
				.ft-btn{
					white-space: nowrap;margin-right: 20rpx;
					&:last-child{margin-right: 0;}
					&.active{
						.iconfont,view{color: #F55332;}
					}
					.iconfont{color: #333;font-size: 38rpx;padding-right: 10rpx;}
					view{font-size: 24rpx;color: #666;}
				}
			}
			.con{margin-top: 20rpx;}
			.cn-btn{display: inline-block;background-color: #F55332;color: #fff;border-radius: 100rpx;padding: 4rpx 20rpx;font-size: 26rpx;margin-top: 20rpx;}
		}
	}
	.push-comment{
		justify-content: center;
		position: fixed;height: 139rpx;box-sizing: content-box;z-index: 9;background-color: #fff;border-top: 1rpx solid #ddd;bottom: 0;left: 0;width: 100%;
		.push-btn{background-color: #DF7B5A;width: 240rpx;height: 80rpx;line-height: 80rpx;border-radius: 100rpx;color: #fff;text-align: center;
			font-size: 30rpx;font-weight: bold;
			.num1{padding-left: 10rpx;}
		}
	}
	.push-box{
		padding: 50rpx 50rpx 50rpx;width: 650rpx;
		textarea{height: 320rpx;display: block;width: 100%;padding: 24rpx;box-sizing: border-box;box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);border-radius: 20rpx;font-size: 28rpx;}
		
		.push-btn{background-color: #DF7B5A;width: 240rpx;height: 80rpx;line-height: 80rpx;border-radius: 100rpx;color: #fff;text-align: center;
			font-size: 30rpx;font-weight: bold;margin: 50rpx auto 0;
			.num1{padding-left: 10rpx;}
		}
	}
</style>
